<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.joinway.framework.bean.domain.constant.SqlConstants.*" %>
<style type="text/css">
#pageDemo_dlg{
	padding:10px 20px;
}
#pageDemo_form table{
	width:100%;
	border-collapse:collapse;
	border-right:1px solid #A9A9A9;
}
#pageDemo_form th{
	border-left:1px solid #A9A9A9;
	border-top:1px solid #A9A9A9;
	border-bottom:1px solid #A9A9A9;
	border-right:1px solid #D3D3D3;
	padding-left:10px;
	padding-right:10px;
	text-align:right;
}
#pageDemo_form td{
	border-top:1px solid #A9A9A9;
	border-bottom:1px solid #A9A9A9;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	text-align:left;
}
</style>

<script type="text/javascript">
var pageDemoTable = 'pageDemo';
var pageDemoQuery;
var wysiwye = false;	// what you see is what you export

$(function() {
	var query = {
		"order": [
			{
				"field":"id",
				"sort":"desc"
			},			{
				"field":"userName",
				"sort":"asc"
			}		]
	};

	initDataGrid('#pageDemo_grid', appName + 'search/' + pageDemoTable + '.json?init=' + JSON.stringify(query));
	pageDemoQuery = '';

	initUploadFileForm($('#pageDemo_file_form'), $('#pageDemo_columnMap'), $('#pageDemo_grid'), wysiwye);
});


/**
 * 查询
 */
function searchPageDemo() {
	pageDemoQuery = getPageDemoQueryJson();
	searchDataGrid('#pageDemo_grid', pageDemoQuery);
}

/**
 * 查询条件
 */
function getPageDemoQueryJson(){
	var query = {
		"items":[
		    {
				"field": "userName",
				"operator": "like",
				"value": $('#pageDemo_userName').val()
			},		    {
				"field": "gender",
				"operator": "like",
				"value": $('#pageDemo_gender').val()
			},		    {
				"field": "cellPhone",
				"operator": "like",
				"value": $('#pageDemo_cellPhone').val()
			},		    {
				"field": "status",
				"operator": "like",
				"value": $('#pageDemo_status').val()
			},		    {
				"field": "registerDate",
				"operator": "like",
				"value": $('#pageDemo_registerDate').val()
			},		    {
				"field": "updateDate",
				"operator": "like",
				"value": $('#pageDemo_updateDate').val()
			}		],
		"order": [
			{
				"field":"id",
				"sort":"desc"
			},			{
				"field":"userName",
				"sort":"asc"
			}		]
	}

	return query;
}

/**
 * 刷新
 */
//function refreshPageDemo() {
//	refreshDataGrid('#pageDemo_grid');
//}

/** 
 * 添加
 */
function addPageDemoItem(){
	showAddDialog('#pageDemo_form', '#pageDemo_dlg');
 
	// 设置每一个radio最后一项选中
	$('#pageDemo_form').children().find(':radio').each(function(){
		$(this).prop('checked', true);
	});
	
	$('#pageDemo_save').unbind('click');
	$('#pageDemo_save').click(function(){
	 	var valid = true;
	 	/* 如果要进行数据重复校验，在这里添检查ajax调用
	 	 * 以下例子用来检查单个字段是否重复
	 	 */
	 	//valid = checkExistence(pageDemoTable, '数据已存在', <fieldName>, $('#pageDemo_<fieldName>_input').val());
	 	
	 	if(valid){
 			resetPageDemoTimestampItem();
 			resetPageDemoEditorItem();

			saveItem({jgridId:'#pageDemo_grid', jformId:'#pageDemo_form', jdlgId:'#pageDemo_dlg', table:pageDemoTable, callback:null});
	 	}
 	});
}

/**
 * 编辑
 */
function editPageDemoItem(){
	var flag = showEditDialog('#pageDemo_grid', '#pageDemo_form', '#pageDemo_dlg');
 
	if(flag){
	 	var valid = true;
	 	/* 如果要进行数据重复校验，在这里添检查ajax调用
	 	 * 以下例子用来检查单个字段是否重复
	 	 */
	 	//valid = checkExistence(pageDemoTable, '数据已存在', <fieldName>, $('#pageDemo_<fieldName>_input').val());
	 	
	 	if(valid){
			resetPageDemoTimestampItem();
			resetPageDemoEditorItem();
			$('#pageDemo_save').unbind('click');
			$('#pageDemo_save').click(function(){
				saveItem({jgridId:'#pageDemo_grid', jformId:'#pageDemo_form', jdlgId:'#pageDemo_dlg', table:pageDemoTable, callback:null});
			});
	 	}
	}
}

/**
 * 复制
 */
function copyPageDemoItem(){
	var flag = showCopyDialog('#pageDemo_grid', '#pageDemo_form', '#pageDemo_dlg');
	
	if(flag){
 		/* 在这里重设需要初始化的字段 */
 		// 默认清空自增主键
		_.each(['id','userName'], function(element){
			$('#pageDemo_form').children().find('input[name="' + element + '"]').each(function(){
				$(this).val('');
			});
		});
		
		resetPageDemoTimestampItem();
		resetPageDemoEditorItem();

		$('#pageDemo_save').unbind('click');
		$('#pageDemo_save').click(function(){
		 	var valid = true;
		 	/* 如果要进行数据重复校验，在这里添检查ajax调用
		 	 * 以下例子用来检查单个字段是否重复
		 	 */
		 	//valid = checkExistence(pageDemoTable, '数据已存在', <fieldName>, $('#pageDemo_<fieldName>_input').val());
		 	
		 	if(valid){
		 		saveItem({jgridId:'#pageDemo_grid', jformId:'#pageDemo_form', jdlgId:'#pageDemo_dlg', table:pageDemoTable, callback:null});
		 	}
		});
	}
}

/**
 * 设置更新时间戳
 */
function resetPageDemoTimestampItem(){
	var fields = ['updateDate'];
	$('#pageDemo_form').children().find('input').each(function(){
		if(_.contains(fields, $(this).attr('name'))){
			$(this).val('<%=ReservedValue.CURRENT_TIMESTAMP%>');
		}
	});
}

/**
 * 设置更新者
 */
function resetPageDemoEditorItem(){
	var fields = ['updateBy'];
	$('#pageDemo_form').children().find('input').each(function(){
		if(_.contains(fields, $(this).attr('name'))){
			$(this).val('${userContext.user.loginName}');
		}
	});
}

/**
 * 导出查询结果
 */
function exportPageDemoQuery(type){
	var suffix = type == 'Excel' ? 'xls' : 'csv';
	
	showConfirmMessage('是否以' + type + '格式导出查询结果?', function(r){
		if(r){
			var form = new Object();

			form.columns = getExportColumns($('#pageDemo_grid'), wysiwye);
			form.table = pageDemoTable;
			
			var query = pageDemoQuery ? pageDemoQuery : getPageDemoQueryJson();
			form.query = JSON.stringify(query);
			
			// 表格显示的名称
			form.tableDisplayName = $(jtabId).tabs('getSelected').panel('options').title;
			// 下载文件的名称
			form.fileName = $(jtabId).tabs('getSelected').panel('options').title;
			// 下载文件格式
			form.type = suffix;
			
			downloadFile(form);
		}
	});
}

/**
 * 格式化gender字段
 */
function PageDemoGenderFormatter(value, row, index){
	var text;
	switch(value){
		case 'F':
			text = '女';
			break;
		case 'M':
			text = '男';
			break;
		default:
			text = value;
	}
	return text;
}
/**
 * 格式化cellPhoneType字段
 */
function PageDemoCellPhoneTypeFormatter(value, row, index){
	var text;
	switch(value){
		case 'Android':
			text = 'Android';
			break;
		case 'iPhone':
			text = 'iPhone';
			break;
		default:
			text = value;
	}
	return text;
}
/**
 * 格式化status字段
 */
function PageDemoStatusFormatter(value, row, index){
	var text;
	switch(value){
		case 'N':
			text = '禁用';
			break;
		case 'Y':
			text = '启用';
			break;
		default:
			text = value;
	}
	return text;
}

function resizePageDemo(){
	$('#pageDemo_grid').datagrid('resize');
}
</script>

<table id="pageDemo_grid" data-options="toolbar:'#pageDemo_toolbar'">
    <thead>
        <tr>
        	<th data-options="field:'ck'" checkbox="true"></th>
			<th data-options="field:'id',hidden:false">编号</th>
			<th data-options="field:'userName',hidden:false">用户名</th>
			<th data-options="field:'password',hidden:false">密码</th>
			<th data-options="field:'gender',hidden:false,formatter:PageDemoGenderFormatter">性别</th>
			<th data-options="field:'age',hidden:false">年龄</th>
			<th data-options="field:'cellPhone',hidden:false">手机号</th>
			<th data-options="field:'cellPhoneType',hidden:false,formatter:PageDemoCellPhoneTypeFormatter">手机类型</th>
			<th data-options="field:'weight',hidden:false">体重</th>
			<th data-options="field:'balance',hidden:false">余额</th>
			<th data-options="field:'status',hidden:false,formatter:PageDemoStatusFormatter">状态</th>
			<th data-options="field:'email',hidden:false">电子邮箱</th>
			<th data-options="field:'zip',hidden:false">邮编</th>
			<th data-options="field:'birthday',hidden:false">生日</th>
			<th data-options="field:'registerDate',hidden:false">注册时间</th>
			<th data-options="field:'photo',hidden:false">头像</th>
			<th data-options="field:'attachment',hidden:false">附件</th>
			<th data-options="field:'comment',hidden:false">注释</th>
			<th data-options="field:'updateDate',hidden:false">更新日期</th>
			<th data-options="field:'updateBy',hidden:false">更新人</th>
		</tr>
    </thead>
</table>

<div id="pageDemo_toolbar">
	<div style="display:none">
		<form id="pageDemo_file_form" enctype="multipart/form-data" method="post" action="file/import.json">
			<input id="pageDemo_file" type="file" name="file" accept="" onchange="startUpload($('#pageDemo_file_form'));"/>
			<input name="table" type="text" value="pageDemo">
			<input id="pageDemo_columnMap" name="columnMap" type="text">
			<input id="pageDemo_file_submit" type="submit"/>
		</form>
		<iframe id="pageDemo_file_target" name="pageDemo_file_target"></iframe>
	</div>

	<div id="pageDemo_querybar" title="查询条件" class="easyui-panel" data-options="collapsible:true,border:false,onCollapse:resizePageDemo,onExpand:resizePageDemo">
		<table>
			<tr>
				<td style="text-align:right;">用户名</td>
				<td style="text-align:left;padding-left:0px;padding-right:10px;">
					<input id="pageDemo_userName" style="width:100%" type="text"/>
				</td>
				<td style="text-align:right;">性别</td>
				<td style="text-align:left;padding-left:0px;padding-right:10px;">
					<select id="pageDemo_gender" style="width:100%">
						<option value="" selected>全部</option>
						<option value="F">女</option>
						<option value="M">男</option>
					</select>
				</td>
				<td style="text-align:right;">手机号</td>
				<td style="text-align:left;padding-left:0px;padding-right:10px;">
					<input id="pageDemo_cellPhone" style="width:100%" type="text"/>
				</td>
				<td style="text-align:right;">状态</td>
				<td style="text-align:left;padding-left:0px;padding-right:10px;">
					<select id="pageDemo_status" style="width:100%">
						<option value="" selected>全部</option>
						<option value="N">禁用</option>
						<option value="Y">启用</option>
					</select>
				</td>
				<td style="padding-left:10px;">
					<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="searchPageDemo()">查询</a>
					<a href="#" class="easyui-linkbutton" iconCls="icon-clear" onclick="clearCriteria('#pageDemo_querybar')">清空</a>
				</td>
			</tr>
			<tr>
				<td style="text-align:right;">注册时间</td>
				<td style="text-align:left;padding-left:0px;padding-right:10px;">
					从<input id="pageDemo_registerDate_from" class="easyui-datebox" style="width:100px">&nbsp;到&nbsp;<input id="pageDemo_registerDate_to" class="easyui-datebox" style="width:100px">
				</td>
				<td style="text-align:right;">更新日期</td>
				<td style="text-align:left;padding-left:0px;padding-right:10px;">
					从<input id="pageDemo_updateDate_from" class="easyui-datebox" style="width:100px">&nbsp;到&nbsp;<input id="pageDemo_updateDate_to" class="easyui-datebox" style="width:100px">
				</td>
			</tr>
		</table>
	</div>

	<div style="margin-bottom:5px">
  		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addPageDemoItem()">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editPageDemoItem()">编辑</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-copy" plain="true" onclick="copyPageDemoItem()">复制</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cross" plain="true" onclick="deleteItem({jgridId:'#pageDemo_grid', table:pageDemoTable, idField:'id', callback:function(){}})">删除</a>
        <a href="#" class="easyui-menubutton" iconCls="icon-export" data-options="menu:'#pageDemo_export'">导出</a>
        <div id="pageDemo_export">
			<div data-options="iconCls:'icon-excel'" onclick="exportPageDemoQuery('Excel')">Excel</div>
			<div data-options="iconCls:'icon-csv'" onclick="exportPageDemoQuery('CSV')">CSV</div>
		</div>
        <a href="#" class="easyui-menubutton" iconCls="icon-import" data-options="menu:'#pageDemo_import'">导入</a>
        <div id="pageDemo_import">
			<div data-options="iconCls:'icon-excel'" onclick="selectFile('#pageDemo_file', 'Excel')">Excel</div>
			<div data-options="iconCls:'icon-csv'" onclick="selectFile('#pageDemo_file', 'CSV')">CSV</div>
		</div>
	</div>
</div>

<div id="pageDemo_dlg" class="easyui-dialog" style="width:40%" data-options="shadow:false,resizable:true,closed:true" buttons="#pageDemo_dlg_buttons">
     <form id="pageDemo_form" method="post" novalidate>
     	<table>
				
			<tr style="display:none">
				<th style="">
					编号
				</th>
				<td><input id="pageDemo_id_input" style="width:95%" name="id" class="easyui-numberspinner" data-options="required:false"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					用户名
				</th>
				<td><input id="pageDemo_userName_input" style="width:95%" name="userName" class="easyui-validatebox" data-options="required:true"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					密码
				</th>
				<td><input id="pageDemo_password_input" style="width:95%" name="password" class="easyui-validatebox" data-options="required:true"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					性别
				</th>
					<td>
			<label><input id="pageDemo_gender_input1" name="gender" type="radio" value="F">女</label>
			<label><input id="pageDemo_gender_input2" name="gender" type="radio" value="M">男</label>
			</td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					年龄
				</th>
				<td><input id="pageDemo_age_input" style="width:95%" name="age" class="easyui-numberspinner" data-options="min:0,required:false"></td>
				<td><span class="hint">最小值0</span></td>
		</tr>
				
			<tr style="">
				<th style="">
					手机号
				</th>
				<td><input id="pageDemo_cellPhone_input" style="width:95%" name="cellPhone" class="easyui-validatebox" data-options="required:false,validType:'mobile'"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					手机类型
				</th>
					<td>
			<label><input id="pageDemo_cellPhoneType_input1" name="cellPhoneType" type="radio" value="Android">Android</label>
			<label><input id="pageDemo_cellPhoneType_input2" name="cellPhoneType" type="radio" value="iPhone">iPhone</label>
			</td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					体重
				</th>
						<td><input id="pageDemo_weight_input" style="width:95%" name="weight" class="easyui-numberbox" data-options="min:1,max:500,precision:2,required:false"></td>
				<td><span class="hint">最小值1,最大值500(2位小数)</span></td>
		</tr>
				
			<tr style="">
				<th style="">
					余额
				</th>
				<td><input id="pageDemo_balance_input" style="width:95%" name="balance" class="easyui-numberbox" data-options="min:0,precision:3,required:false"></td>
				<td><span class="hint">最小值0(3位小数)</span></td>
		</tr>
				
			<tr style="">
				<th style="">
					状态
				</th>
					<td>
			<label><input id="pageDemo_status_input1" name="status" type="radio" value="N">禁用</label>
			<label><input id="pageDemo_status_input2" name="status" type="radio" value="Y">启用</label>
			</td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					电子邮箱
				</th>
				<td><input id="pageDemo_email_input" style="width:95%" name="email" class="easyui-validatebox" data-options="required:false,validType:'email'"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					邮编
				</th>
				<td><input id="pageDemo_zip_input" style="width:95%" name="zip" class="easyui-validatebox" data-options="required:false,validType:'zip'"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					生日
				</th>
				<td><input id="pageDemo_birthday_input" style="width:95%" name="birthday" class="easyui-datebox" data-options="required:false"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					注册时间
				</th>
				<td><input id="pageDemo_registerDate_input" style="width:95%" name="registerDate" class="easyui-datetimebox" data-options="required:false"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					头像
				</th>
				<td><input id="pageDemo_photo_input" style="width:95%" name="photo" class="easyui-validatebox" data-options="required:false"></td>
				<td><span class="hint"></span></td>
		</tr>
				
			<tr style="">
				<th style="">
					附件
				</th>
				<td><input id="pageDemo_attachment_input" style="width:95%" name="attachment" class="easyui-validatebox" data-options="required:false"></td>
				<td><span class="hint"></span></td>
		</tr>
					
			<tr style="">
				<th style="vertical-align:top">
					注释
				</th>
				<td><textarea id="pageDemo_comment_input" style="width:95%" name="comment" rows="3"></textarea></td>
				<td><span class="hint"></span></td>
		</tr>
					
			<tr style="display:none">
				<th style="">
					更新日期
				</th>
				<td><input id="pageDemo_updateDate_input" style="width:95%" name="updateDate" class="easyui-datetimebox" data-options="required:false"></td>
				<td><span class="hint"></span></td>
		</tr>
					
			<tr style="display:none">
				<th style="">
					更新人
				</th>
				<td><input id="pageDemo_updateBy_input" style="width:95%" name="updateBy" class="easyui-validatebox" data-options="required:false"></td>
				<td><span class="hint"></span></td>
		</tr>
		</table>
     </form>
 </div>
 <div id="pageDemo_dlg_buttons">
     <a id="pageDemo_save" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save">保存</a>
     <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-no" onclick="closeDialog('#pageDemo_dlg')">取消</a>
 </div>



